<script setup>
import { onMounted, computed, reactive } from "vue";

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const fetchData = async () => {
  await delay(3000);
  return {
    books: [
      "Vue 2 - Advanced Guide",
      "Vue 3 - Basic Guide",
      "Vue 4 - The Mystery",
    ],
  };
};

defineProps({
  msg: String,
});

// 一个生命周期钩子
onMounted(async () => {
  author.books = await fetchData();
});

const author = reactive({
  name: "John Doe",
  books: [],
});

// 一个计算属性 (computed property)
const publishedBooksMessage = computed(() => {
  return author.name.length > 0 ? "Yes" : "No";
});

const updateName = () => {
  author.name = "";
};
</script>

<template>
  <h1>{{ msg }}</h1>

  <h2>{{ author.name }}</h2>

  <h2>{{ publishedBooksMessage }}</h2>

  <div class="card">
    <button @click="updateName">更新</button>
  </div>

  <ul>
    <li :key="book" v-for="book in author.books">
      {{ book }}
    </li>
  </ul>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
